<template>
  <com-page class="com-spacing com-color-content-bg">
    <view class="com-text-right com-p-y-md" @click="$utils.router({ type: 'back' })">关闭</view>
    <view class="com-text-28 com-mt-lg">欢迎注册</view>

    <view class="com-pt-xxl">
      <view class="com-mt-lg com-flex com-justify-between">
        <text>手机号或邮箱</text>
      </view>
      <view class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input :placeholder="$t('pages_account_login_components_app-login_desc_5a2b754b')" v-model="form.phone" type="text" border="none" clearable />
      </view>
      <view class="com-mt-lg com-flex com-justify-between">
        <text>设置密码</text>
      </view>
      <view class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input :placeholder="$t('pages_account_login_components_app-login_msg_e39ffe99')" v-model="form.password" border="none" :password="!isShowPassword" clearable>
          <com-icon :name="isShowPassword ? 'eye' : 'eye-off'" @click="onSetEyeHide" slot="suffix" />
        </u-input>
      </view>
      <view class="com-mt-lg com-flex com-justify-between">
        <text>确认密码</text>
      </view>
      <view class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input
          :placeholder="$t('pages_account_register_register_desc_a7a9a215')"
          v-model="form.confirmPassword"
          border="none"
          :password="!isShowConfirmPassword"
          clearable
        >
          <com-icon :name="isShowConfirmPassword ? 'eye' : 'eye-off'" @click="onSetConfirmEyeHide" slot="suffix" />
        </u-input>
      </view>
      <view class="com-mt-lg com-flex com-justify-between">
        <text>验证码</text>
      </view>
      <view class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input :placeholder="$t('pages_account_forget_forget_msg_d0c06a0d')" v-model="form.code" type="number" border="none" clearable>
          <view class="com-color-tips" @click="onSendCode" slot="suffix">{{
            countdown === 0 ? '获取验证码' : countdown + '后重新获取'
          }}</view>
        </u-input>
      </view>
      <!-- <view class="com-mt-lg com-flex com-justify-between">
        <text>邀请码</text>
      </view>
      <view class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input :placeholder="$t('pages_account_register_register_msg_98df779c')" v-model="form.inviteCode" type="number" border="none" clearable />
      </view> -->
    </view>

    <u-button type="primary" class="com-mt-xxl" @click="onRegister">确认注册</u-button>
    <view class="com-text-center com-text-sm com-mt-md">
      <text>注册即代表您已同意</text>
      <text class="com-color-link">《用户协议》</text>
    </view>
  </com-page>
</template>

<script>
export default {
  name: 'App-Register',
  data() {
    return {
      form: {
        phone: '',
        password: '',
        confirmPassword: '',
        code: ''
      },
      isShowPassword: false,
      isShowConfirmPassword: false,
      countdown: 0,
      timer: null
    }
  },
  methods: {
    async onSendCode() {
      if (this.countdown > 0) return
      
      if (!this.form.phone) {
        uni.showToast({ title: this.$t('pages_account_login_components_app-login_desc_5a2b754b'), icon: 'none' })
        return
      }
      
      const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.phone)
      const isPhone = /^1[3-9]\d{9}$/.test(this.form.phone)
      
      if (!isEmail && !isPhone) {
        uni.showToast({ title: this.$t('pages_account_register_register_desc_0ee64bc2'), icon: 'none' })
        return
      }
      
      try {
        const { sendCode } = require('@/api/modules/user.js')
        await sendCode({
          mobile: this.form.phone,
          type: isEmail ? '1' : '0'
        })
        
        uni.showToast({ title: this.$t('pages_account_register_register_msg_4d7fb50d'), icon: 'success' })
        this.countdown = 60
        this.timer = setInterval(() => {
          this.countdown -= 1
          if (this.countdown === 0) {
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      } catch (error) {
        uni.showToast({ title: error.message || this.$t('pages_account_register_register_msg_9ca6a344'), icon: 'none' })
      }
    },
    changeType() {
      this.isPhoneLogin = !this.isPhoneLogin
    },
    onSetEyeHide() {
      this.isShowPassword = !this.isShowPassword
    },
    onSetConfirmEyeHide() {
      this.isShowConfirmPassword = !this.isShowConfirmPassword
    },
    validateForm() {
      if (!this.form.phone) {
        uni.showToast({ title: this.$t('pages_account_login_components_app-login_desc_5a2b754b'), icon: 'none' })
        return false
      }
      
      const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.phone)
      const isPhone = /^1[3-9]\d{9}$/.test(this.form.phone)
      
      if (!isEmail && !isPhone) {
        uni.showToast({ title: this.$t('pages_account_register_register_desc_0ee64bc2'), icon: 'none' })
        return false
      }
      
      if (!this.form.password || this.form.password.length < 6) {
        uni.showToast({ title: '密码至少6位', icon: 'none' })
        return false
      }
      
      if (this.form.password !== this.form.confirmPassword) {
        uni.showToast({ title: this.$t('pages_account_register_register_desc_f0d6401f'), icon: 'none' })
        return false
      }
      
      if (!this.form.code) {
        uni.showToast({ title: this.$t('pages_account_forget_forget_msg_d0c06a0d'), icon: 'none' })
        return false
      }
      
      return true
    },
    async onRegister() {
      if (!this.validateForm()) return
      
      const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.phone)
      
      try {
        const result = await this.$api.user.register({
          mobile: this.form.phone,
          password: this.form.password,
          type: isEmail ? 1 : 0,
          code: this.form.code
        })
		
        uni.showToast({ title: this.$t('pages_account_register_register_msg_6506a9ec'), icon: 'success' })
		this.$store.dispatch('setToken', result['token'])
		const info = await this.$api.user.getInfo()
		this.$store.dispatch('setUserInfo', info['post'])
        setTimeout(() => {
          this.$utils.router({ type: 'back' })
        }, 1500)
      } catch (error) {
        uni.showToast({ title: error.message || this.$t('pages_account_register_register_msg_1c56d8c5'), icon: 'none' })
      }
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style scoped lang="scss"></style>
